<template>
	<div id='VisualEdit'>
		<v-editstep :flagData='1'></v-editstep>
		<div class="Edit">
			<div @click='addList()' class='addEdit'><i class='el-icon-plus'></i><span>新增实验页面</span></div>
				<el-tabs v-model="editableTabsValue" >
          <el-tab-pane
            :key="item.name"
            v-for="item in editableTabs"
            :label="item.title"
            :name="item.name">
            {{item.content}}
          </el-tab-pane>
				</el-tabs>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
  import { VEditstep } from '../../../../components'
  export default {
    components: {
      VEditstep
    },
    data () {
      return {
        editableTabsValue: '2',
        editableTabs: [{
          title: '原始页面',
          name: '1',
          content: '原始页面'
        }, {
          title: '实验页面1',
          name: '2',
          content: '实验页面1'
        }],
        tabIndex: 2
      }
    },
    methods: {
      addList () {
        let newTabName = ++this.tabIndex + ''
        this.editableTabs.push({
          title: '实验页面' + (this.tabIndex - 1),
          name: newTabName,
          content: '实验页面' + (this.tabIndex - 1)
        })
        this.editableTabsValue = newTabName
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
#VisualEdit
  .Edit
    position relative
    width 100%
    .addEdit
      position: absolute
      right 0
      top 5px
      display flex
      justify-content center
      align-items center
      font-size 12px
      color #016DFB
      border-radius 4px
      border 1px solid #D8DCE5
      width 112px
      height 29px
      z-index 999
  .el-tabs__nav-scroll
    width 85%
  .el-tabs__nav-next
    right 130px
</style>
